import React from 'react'
import PropTypes from 'prop-types'
import {Modal, Form, Input, Select, Avatar, Button, Tree, message} from 'antd';
import axios from "axios";
import api from "../../../../api/api";


const {Option} = Select;
const FormItem = Form.Item;

@Form.create()
class Model extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            visible: false,
            param:{
                id:"",
                roleName:"",
                roleCode:"",
                status:"",
            }
        };
    }
    componentDidMount() {
        this.props.onRef(this)
    }
    //清空form表单数据
    clearData() {
        this.props.form.resetFields();
    }
    handleOk = () => {
        let that = this;
        this.props.form.validateFields((error, values) => {
            if (error != null) {
                return;
            }
            let data={
              id:"",
              roleName: values.roleName,
              roleCode: values.roleCode,
              status:values.status,
            };
            console.log(values)
            if(this.props.data.type === 2) {
                let data={
                    id:this.props.data.gridList.id,
                    roleName: values.roleName,
                    roleCode: values.roleCode,
                    status:values.status,
                };
                let url = api.api_URL + "/admin/role/updateRole";
                axios.post(url, data, {
                    headers: {
                        "Content-Type": api.ContentType
                    }
                }).then(function (res) {
                    console.log(res.data)
                    if (res.data.errorCode != 1) {
                        message.error({content:"失败，请重新尝试！"})
                        return;
                    }
                    message.success({content:"成功！"})

                    that.handleCancel()
                }).catch(function (err) {
                    message.error({content:"失败，请重新尝试！"})
                    console.log(err);
                });
            }
            if(this.props.data.type === 1) {
                let url = api.api_URL + "/admin/role/addRole";
                axios.post(url, data, {
                    headers: {
                        "Content-Type": api.ContentType
                    }
                }).then(function (res) {
                    console.log(res.data)
                    if (res.data.errorCode != 1) {
                        message.error({content:"失败，请重新尝试！"})
                        return;
                    }
                    message.success({content:"成功！"})

                    that.handleCancel()
                }).catch(function (err) {
                    message.error({content:"失败，请重新尝试！"})
                    console.log(err);
                });
            }
        })
    }

    handleCancel = e => {
        console.log(e);
        this.clearData();
        this.props.handleCancel()
    };

    initEditData= () => {
        const { form } = this.props;
        console.log(this.props.data.gridList)
        let data = this.props.data.gridList
        const {param} = this.state;
        param.id=this.props.data.id;
        param.roleName=this.props.data.roleName;
        param.roleCode=this.props.data.roleCode;
        param.status=this.props.data.status;
        Object.keys(form.getFieldsValue()).forEach(key => {
            const obj = {};
            if (data[key]) {
                obj[key] = data[key] || null;
            }
            form.setFieldsValue(obj);
        });
    }



    render() {
        const {getFieldDecorator} = this.props.form
        return (
            <div>
                <Modal
                    title={this.props.data.title}
                    visible={this.props.data.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                >
                    <Form name="control-ref"
                          labelCol={{span: 6}}
                          wrapperCol={{span: 14}}
                          layout="horizontal"
                    >
                        <FormItem label="角色名称：" name="roleName">
                            {getFieldDecorator("roleName", {
                                rules: [
                                    {
                                        required: true,
                                        message: "角色名称"
                                    }
                                ]
                            })(
                                <Input/>
                            )}
                        </FormItem>
                        <FormItem label="角色代码：" name="roleCode">
                            {getFieldDecorator("roleCode", {
                                rules: [
                                    {
                                        required: true,
                                        message: "角色代码"
                                    }
                                ]
                            })(
                                <Input/>
                            )}
                        </FormItem>
                        <FormItem label="状态：" name="status">
                            {getFieldDecorator("status", {
                                rules: [
                                    {
                                        required: true,
                                        message: "状态"
                                    }
                                ]
                            })(
                                <Select style={{width: 275}} placeholder="请选择状态">
                                    <Option key="1">可用</Option>
                                    <Option key="0">不可用</Option>

                                </Select>
                            )}
                        </FormItem>
                    </Form>
                </Modal>
            </div>
        );
    }

}

Model.propTypes = {
    type: PropTypes.string,
    item: PropTypes.object,
    onOk: PropTypes.func,
}
export default Model
